import React, { Component } from 'react';
import request from "../../../api"
import   "./mincenter.css"
import { Avatar, List, Space, NavBar, Grid, Badge ,Popover,Toast} from 'antd-mobile'
import { createFromIconfontCN } from '@ant-design/icons';
import { SearchOutline, MoreOutline, CloseOutline,EyeFill,ContentOutline,AppstoreOutline,HeartOutline,UserOutline} from 'antd-mobile-icons'
import { Action } from 'antd-mobile/es/components/popover'
import Hengxian from '../../../components/Center';
import Recommend from "../../../components/RecommendList"
interface Props {
    history: any,
    location: any,
    match: any
}
interface State {

    centerlist: CenterItem[]
}
interface CenterItem {
    nickname: string,
    avatar: string,
}
const IconFont = createFromIconfontCN({
    scriptUrl: [
        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
        '//at.alicdn.com/t/c/font_3589961_k1j0o6r1fuo.js',
    ],
});
//右上角悬浮弹框数据
const actions: Action[] = [
    { key: 'scan', icon: <ContentOutline />, text: '首页' },
    { key: 'payment', icon: <AppstoreOutline />, text: '分类搜索' },
    { key: 'bus', icon: <HeartOutline />, text: '购物车' },
    { key: 'assistant', icon: <UserOutline />, text: '我的京东' },
    { key: 'browse', icon: <EyeFill />, text: '浏览记录' },
  ]
const right = (
    <div style={{ fontSize: 24 }}>
        <Space style={{ '--gap': '16px' }}>
        <Popover.Menu
          mode='dark'
          actions={actions}
          placement='bottom-start'
          onAction={node => Toast.show(`选择了 ${node.text}`)}
          trigger='click'
        >
            <MoreOutline />
            </Popover.Menu>
        </Space>
    </div>
)
class Minecenter extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            centerlist: []
        }
    }
    componentDidMount(): void {
        var token = localStorage.getItem("token")
        var userid = localStorage.getItem("userid")
        if (token != null && userid != null) {
            request.user.user_info({ userid: userid }).then((ok) => {
                this.setState({ centerlist: ok.data.data }, () => {
                    console.log(this.state.centerlist);


                })


            })
        }
    }
    back() {
        console.log(666);

    }
    //跳转至账户设置页面
    toaddress(){
        this.props.history.push("/address")
        
    }

    render() {
        return (
            <div className='mincenter'>
                <NavBar right={right} style={{ "--border-bottom": "solid 1px #eee", }} onBack={this.back}>个人中心</NavBar>
                {
                    this.state.centerlist.map((item, index) => {
                        return (
                            <List key={index} className="center_top" style={{ "--border-bottom": "0", "--border-top": "0" ,"--padding-left": "0"}}>
                                <List.Item
                                    prefix={<Avatar src="https://img0.baidu.com/it/u=859596607,306107302&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" style={{ '--size': '88px' }} />}
                                    description='移动端首页页面'
                                >
                                    昵称:{item.nickname}  <IconFont  className="iconf" type="icon-daipingjia" />
                                </List.Item>
                                <IconFont onClick={()=>{this.toaddress()}} className="shezhi" type="icon-shezhi" />
                            </List>
                        )
                    })
                }
                <div className='grid'>
                    <Grid columns={3} gap={0}>
                        <Grid.Item className={'grid-demo-top'}>
                            <span>商品收藏 <span>168</span></span>
                        </Grid.Item>
                        <Grid.Item className={'grid-demo-top'}>
                            <span>店铺收藏 <span>99</span></span>
                        </Grid.Item>
                        <Grid.Item className={'grid-demo-top'}>
                            <span>我的足迹 <span>200</span></span>
                        </Grid.Item>

                    </Grid>
                    <Grid columns={5} gap={0} className="grid-demo-bottom">
                        <Grid.Item >
                            <div className={'grid-demo-item-block'}>
                                <Badge content='1'>
                                    <IconFont className="iconf" type="icon-daifukuan" /></Badge>
                                <span>待付款</span>

                            </div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}>
                                <Badge content=''>
                                    <IconFont className="iconf" type="icon-daishouhuo" /></Badge>
                                <span>待发货</span> </div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}>
                                <Badge content='5'>
                                    <IconFont className="iconf" type="icon-daipingjia" /></Badge>
                                <span>待评价</span> </div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}>
                                <Badge content=''>
                                    <IconFont className="iconf" type="icon-shouhou" /></Badge>
                                <span>售后/退款</span> </div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}>
                                <Badge content='5'>
                                    <IconFont className="iconf" type="icon-quanbudingdan" /></Badge>
                                <span>全部订单</span> </div>
                        </Grid.Item>
                    </Grid>
                </div>
                <Hengxian></Hengxian>
                <Recommend></Recommend>
            </div>
        );
    }
}

export default Minecenter;